<template>
    <div class="body-wrapper">
        <div>
            <van-card>
                <template #price></template>
                <template #title></template>
                <template #desc></template>
                <template #tags></template>

                <template #thumb>
                    <img class="card-thumb" src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
                </template>

                <template #num>
                    <div class="card-panel-left" @click="toBusiness()">
                        <div class="card-title_img"><span class="card-title">酥小鱼无骨烤鱼</span> <img class="card-title-img"
                                src="/src/assets/icon/xiala-copy.svg" /></div>
                    </div>
                    <div class="card-panel-center">
                        <span class="card-desc">这是描述</span>
                        <div class="card-tags">
                            <van-tag color="#F8CECC" text-color="#F1857E" plain>0.1折起</van-tag>
                            <van-tag color="#F8CECC" text-color="#F1857E" plain>标签</van-tag>
                            <van-tag color="#F8CECC" text-color="#F1857E" plain>标签</van-tag>
                        </div>
                    </div>
                    <div class="card-panel-right">
                        <div class="card-status">已完成</div>
                        <div>
                            <img class="card-img" src="/src/assets/icon/renminbi.svg" />
                            <span class="card-money">14.88</span>
                        </div>
                        <span class="card-quantity">共 {{ 2 }} 件</span>
                    </div>
                </template>

                <template #footer>
                    <div class="card-footer">
                        <van-button size="mini" @click="toBusiness()">再来一单</van-button>
                        <van-button size="mini">售后详情</van-button>
                    </div>
                </template>
            </van-card>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
function toBusiness(index){
    router.push({
        path:'/business',
        query:{
            merchantId:orderInfo.value[index].businessId
        }
    })
}

</script>




<style lang="scss" scoped>
.body-wrapper {
    width: 100vw;
    /* height: 1000vh; */
    background: linear-gradient(to bottom, #FAE45B 0%, #FBE869 3%, #F8EC8A 5%, #F7EEAD 7%, #F4F4F4 10%);
}

.card-thumb {
    width: 100px;
    height: 100px;
    margin-top: 8px;
}

.card-footer {
    height: 55px;
}

.card-panel-left {
    .card-title_img {
        height: 0px;

        .card-title {
            display: inline-block;
            font-size: 16px;
            color: black;
            font-weight: bold;
            margin-top: 8px;
            margin-left: -176px;
        }

        .card-title-img {
            height: 16px;
            margin-bottom: -2px;
        }
    }

}

.card-panel-center {
    height: 0px;

    .card-desc {
        display: inline-block;
        font-size: 14px;
        /* color: black; */
        /* font-weight: bold; */
        margin-top: 30px;
        margin-left: -176px;
    }

    .card-tags {
        margin-bottom: -30px;
        margin-left: -174px;
    }
}

.card-panel-right {

    .card-status {
        color: #1b1a1ad0;
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 24px;
    }

    .card-img {
        width: 20px;
        height: 20px;
        margin-top: -6px;
        margin-left: -20px;
        margin-bottom: -3px;
    }

    .card-money {
        color: black;
        font-size: 20px;
        font-weight: bold;
        margin-top: -6px;
    }

    .card-quantity {
        font-size: 15px;
        color: #1b1a1ad0;
        margin-top: -6px;
        margin-left: 2px;
    }
}
::v-deep(.van-tag){
    width:auto;
    border-radius: 3px;
    margin-right: 5px;
    text-align: center;
}
::v-deep(.van-card) {
    width: 95%;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-left: 10px;
    box-shadow: 0px 20px #F5F5F5;
}

::v-deep(.van-button) {
    min-width: 57px;
    height: 33px;
    margin: 20px 0px 10px 11px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    background-color: #F8E254;
}
</style>